{% include "public/head.html" %}
{% include "public/left.html" %}
{% include "public/header.html" %}

    <!--页面主要内容-->
<main class="lyear-layout-content">
  
  <div class="container-fluid">
    
    <div class="row">
      <div class="col-sm-6 col-lg-3">
        <div class="card bg-primary">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">订单总量</p>
              <p class="h3 text-white m-b-0">{{order_count}}</p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-lg-3">
        <div class="card bg-danger">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">订单总价</p>
              <p class="h3 text-white m-b-0">{{order_total}}</p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-lg-3">
        <div class="card bg-success">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">客户总数</p>
              <p class="h3 text-white m-b-0">{{custom_total}}</p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-lg-3">
        <div class="card bg-purple">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">今日总收入</p>
              <p class="h3 text-white m-b-0">{{today_money}} 条</p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      
      <div class="col-lg-6"> 
        <div class="card">
          <div class="card-header">
            <h4>每周用户</h4>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-bars"></canvas>
          </div>
        </div>
      </div>
      
      <div class="col-lg-6"> 
        <div class="card">
          <div class="card-header">
            <h4>交易历史记录</h4>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-lines"></canvas>
          </div>
        </div>
      </div>
        
    </div>
    
    <div class="row">
      
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            <h4>项目信息</h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>客户名称</th>
                    <th>采购简称</th>
                    <th>ID</th>
                    <th>创建时间</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {% for co in coop_list %}
                  <tr>
                    <td>{{co['sort_id']}}</td>
                    <td>{{co['client_abbre']}}</td>
                    <td>{{co['pur_abbre']}}</td>
                    <td>{{co['id']}}</td>
                    <td>{{co['create_time']}}</td>
                    <td><span class="label label-warning">{{co['status_name']}}</span></td>
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-warning" style="width: 45%;"></div>
                      </div>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</main>
   {% include "public/footer.html" %}
  <script type="text/javascript">
  $(document).ready(function(e) {
      var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
          $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
      
      var $dashChartBarsData = {
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [
        {
          label: '注册用户',
                  borderWidth: 1,
                  borderColor: 'rgba(0,0,0,0)',
          backgroundColor: 'rgba(51,202,185,0.5)',
                  hoverBackgroundColor: "rgba(51,202,185,0.7)",
                  hoverBorderColor: "rgba(0,0,0,0)",
          data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
        }
      ]
    };
      var $dashChartLinesData = {
      labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
      datasets: [
        {
          label: '交易资金',
          data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
          borderColor: '#358ed7',
          backgroundColor: 'rgba(53, 142, 215, 0.175)',
                  borderWidth: 1,
                  fill: false,
                  lineTension: 0.5
        }
      ]
    };
      
      new Chart($dashChartBarsCnt, {
          type: 'bar',
          data: $dashChartBarsData
      });
      
      var myLineChart = new Chart($dashChartLinesCnt, {
          type: 'line',
          data: $dashChartLinesData,
      });
  });
  </script>